<template>
  <div class="nav1 pb-20px">
    <NavTitle title="景区资源数据" />
    <div class=" pl-9px pr-26px">
      <div class="flex items-center pt-22px pb-16px">
        <DwImage class="w-24px h-24px" :src="useImageUrl('vv.png')" />
        <div class="text-16px ml-8px">基础设施</div>
      </div>
      <div class="flex items-center justify-between">
        <div v-for="item in listData" :key="item.title" class="flex flex-col gap-8px">
          <DwImage class="w-48px h-48px" :src="item.icon" />
          <div class="text-16px">{{ item.title }}</div>
          <div class="text-16px color-#0AEFF3 text-center">{{ infoData[item.prop] || 0 }}{{ item.unit }}</div>
        </div>
      </div>
      <div class="nav1_line"></div>
      <div class="flex items-center pb-16px">
        <DwImage class="w-24px h-24px" :src="useImageUrl('vv.png')" />
        <div class="text-16px ml-8px">企业资源</div>
      </div>
      <div class="flex items-center justify-between px-13px">
        <div v-for="item in listData2" :key="item.title" class="flex flex-col gap-17px">
          <div class="main2_icon">
            <div class="color-#78F0FD text-20px font-600">{{ infoData[item.prop] || 0 }}</div>
          </div>
          <div class="text-16px">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import NavTitle from '@/components/NavTitle'
import { useImageUrl } from '@/utils'
import { webDeviceListApi } from '@/api'

const listData = ref([
  {
    title: '监控设备',
    icon: useImageUrl('v1.png'),
    unit: '套',
    prop: '100'
  },
  {
    title: '停车场',
    icon: useImageUrl('v2.png'),
    unit: '个',
    prop: '4'
  },
  {
    title: '洗手间',
    icon: useImageUrl('v3.png'),
    unit: '个',
    prop: '3'
  },
  {
    title: 'Wi-Fi',
    icon: useImageUrl('v4.png'),
    unit: '处',
    prop: '27'
  },
  {
    title: '广播点',
    icon: useImageUrl('v5.png'),
    unit: '处',
    prop: '25'
  }
])

const listData2 = ref([
  {
    title: '餐饮饭馆',
    prop: '7'
  },
  {
    title: '民宿酒店',
    prop: '6'
  },
  {
    title: '度假区景点',
    prop: '1'
  },
  {
    title: '购物打卡',
    prop: '8'
  }
])

const infoData = ref({})
const getData = async () => {
  const { data } = await webDeviceListApi()
  infoData.value = data
}

getData()

</script>

<style lang="scss" scoped>
.nav1 {
  color: #fff;
  .nav1_line{
    height: 2px;
    background-color: rgba($color: #E6EFF2, $alpha: 00.2);
    margin-top: 35px;
    margin-bottom: 22px;
  }
}
.main2_icon{
  width: 62px;
  height: 56px;
  background: url(@/assets/vw.png);
  background-size: 100% 100%;
  text-align: center;
  padding-top: 8px;
}
</style>
